<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">监控道具配置</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" class="mt-10" border height="710">
      <el-table-column label="道具id" prop="item_id" width="98px" align="center"></el-table-column>
      <el-table-column label="道具" prop="item_name" width="98px" align="center"></el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="监控配置" :close-on-click-modal="false">
      <el-form ref="dataForm" :model="dataForm" label-width="100px" label-position="left">
        <el-form-item label="配置">
          <el-row>
            <el-col :md="3"><el-button type="primary" class="add" icon="el-icon-plus" @click="ItemAdd">新增</el-button></el-col>
          </el-row>
          <el-row v-for="(item, index) in dataForm.items" :key="index" class="mt-5" :gutter="12">
            <el-col :md="6">
              <el-select v-model="item.item_id" clearable filterable placeholder="请选择物品">
                <el-option v-for="p in products" :key="p.id" :label="p.desc" :value="p.id" />
              </el-select>
            </el-col>
            <el-col :md="4"><el-button type="danger" icon="el-icon-delete" @click.prevent="remove(item)" /></el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="tr">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { handleCfgItemConfig, getCfgStItemList } from '@/api/statis'
import { getItemConfig } from '@/api/config'

const defaultItem = {
  status: '0',
  items: [{
    id: ''
  }]
}
export default {
  name: 'ItemConfig',
  data() {
    return {
      list: [],
      items: [],
      products: [],
      listLoading: false,
      dialogVisible: false,
      dataForm: Object.assign({}, defaultItem),
      searchForm: {
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleFilter(query) {
      this.searchForm = query
      this.getList()
    },
    handleAdd() {
      this.getItemConfig()
      this.dialogVisible = true
    },
    async getItemConfig() {
      const res = await getItemConfig()
      this.products = res.data.items
    },
    async getList() {
      this.listLoading = true
      const res = await getCfgStItemList(this.searchForm)
      this.listLoading = false
      this.list = res.data.list
      this.dataForm.items = res.data.list
    },
    ItemAdd() {
      this.dataForm.items.push({
        id: ''
      })
    },
    remove(row) {
      var index = this.dataForm.items.indexOf(row)
      if (index !== -1) {
        this.dataForm.items.splice(index, 1)
      }
    },
    confirmSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          handleCfgItemConfig(this.dataForm).then(response => {
            if (response.status) {
              this.dialogVisible = false
              this.getList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.message.error(response.message)
            }
          })
        }
      })
    }
  }
}
</script>
